<template>
  <div class="orderDatail">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <i class="el-icon-arrow-left" @click="goBack"></i>
        <span>商品详情</span>
      </div>
      <div>
        <p>
          订单ID:<span>{{ Data.id }}</span>
        </p>
        <el-divider></el-divider>
        <p>
          orderNo:<span>{{ Data.orderNo }}</span>
        </p>
        <el-divider></el-divider>
        <p>
          下单时间:<span>{{ Data.orderTime | formatYMDhms }}</span>
        </p>
        <el-divider></el-divider>
        <p>
          送达时间:<span>{{ Data.deliveryTime | formatYMDhms }}</span>
        </p>
        <el-divider></el-divider>
        <p>
          联系电话:<span>{{ Data.phone}}</span>
        </p>
        <el-divider></el-divider>
        <p>
          收货人:<span>{{ Data.consignee}}</span>
        </p>
        <el-divider></el-divider>
        <p>
          送货地址:<span>{{ Data.deliverAddress}}</span>
        </p>
        <el-divider></el-divider>
        <p>
          备注:<span>{{ Data.remarks}}</span>
        </p>
        <el-divider></el-divider>
        <p>
          订单金额:<span>{{ Data.orderAmount}}</span>
        </p>
        <el-divider></el-divider>
        <p>
          订单状态:<span>{{ Data.orderState}}</span>
        </p>
      </div>
    </el-card>
  </div>
</template>

<script>
import { orderDetail } from "@/api/order";
export default {
  data() {
    return {
      id: "",
      Data: [],
    };
  },
  methods: {
    async getDetail() {
      let res = await orderDetail({ id: this.id });
      console.log(res);
      this.Data = res.data.data;
    },
    goBack(){
        this.$router.push('/order')
    }
  },
  created() {
    this.id = this.$route.query.id;
    this.getDetail();
  },
};
</script>

<style lang="scss" scoped>
.orderDatail {
  padding: 0 20px;
  margin-top: 15px;
  margin-bottom: 20px;
}
span{
    font-weight: bold;
    margin-left: 20px;
}
.el-icon-arrow-left{
    font-weight:bold;
}
</style>